import React, { useEffect, useState } from 'react'
import { observer, useLocalObservable } from 'mobx-react'
import { Button, SafeArea } from 'antd-mobile'
import IconFont from '@/components/IconFont'
import styles from './index.module.less'
import SelectPopup from './components/selectPopup'
import Store from './store'
import orgLogo from '@/resource/org_logo.png'

const PostDetail = () => {
    const store = useLocalObservable(() => new Store())
    const { professionsInfo, getProfessionsInfo, generateMatchTable } = store

    // 弹窗显隐
    const [visible, setVisible] = useState(false)
    const [operate, setOperate] = useState('')

    useEffect(() => {
        document.title = '职位详情'

        getProfessionsInfo()
    }, [])

    const onClick = (type: string) => {
        setVisible(true)
        setOperate(type)
    }

    const onClickClose = () => {
        setVisible(false)
    }

    const handleGenerate = (value: any) => {
        const params =
            operate === 'reject'
                ? {
                      match_status: '2',
                      match_reason: value.reject_reason,
                      next_action: value.reject_next_steps,
                  }
                : {
                      match_status: '1',
                      match_reason: value.accept_reason,
                      next_action: value.accept_next_steps,
                  }
        generateMatchTable(params)
    }

    return (
        <div className={styles.postdetail}>
            <div className={styles.postdetail_head}>
                <div className={styles.postdetail_name}>
                    <div className={styles.name}>{professionsInfo.professionName}</div>
                    <div className={styles.salary}>{professionsInfo.recruitSimpleDto?.salaryDesc}</div>
                </div>
                <div className={styles.postdetail_label}>
                    <div className={styles.label}>
                        <IconFont type="icon-icon_address" className={styles.iconfont} />
                        <div className={styles.label_text}>{professionsInfo.cityName}</div>
                    </div>
                    <div className={styles.label}>
                        <IconFont type="icon-icon_date" className={styles.iconfont} />
                        <div className={styles.label_text}>{professionsInfo.recruitSimpleDto?.experienceName}</div>
                    </div>
                    <div className={styles.label}>
                        <IconFont type="icon-icon_xueli" className={styles.iconfont} />
                        <div className={styles.label_text}>
                            {professionsInfo.recruitSimpleDto?.educationName}·{professionsInfo.recruitTypeName}
                        </div>
                    </div>
                </div>
            </div>

            <div className={styles.postdetail_content}>
                <div className={styles.head}>职位描述</div>
                <div
                    className={styles.content}
                    dangerouslySetInnerHTML={{
                        __html: professionsInfo?.desc?.replace(/\n/g, '<br/>'),
                    }}
                />
            </div>

            <div className={[styles.postdetail_content, styles.foot_bot].join(' ')}>
                <div className={styles.head}>公司信息</div>
                <div className={styles.company_infor}>
                    <img src={professionsInfo.organizationBase?.logo || orgLogo} className={styles.company_logo} />
                    <div className={styles.company_name}>{professionsInfo.organizationBase?.name}</div>
                </div>
            </div>
            <SafeArea position="bottom" />

            <div className={styles.footer_box}>
                <div className={styles.btn_box}>
                    <Button className={styles.btn} onClick={() => onClick('reject')}>
                        拒绝
                    </Button>
                    <Button className={[styles.btn, styles.btn_accept].join(' ')} onClick={() => onClick('accept')}>
                        接受
                    </Button>
                </div>
                <SafeArea position="bottom" />
            </div>

            <SelectPopup visible={visible} operate={operate} onClose={onClickClose} onConfirm={handleGenerate} />
        </div>
    )
}

export default observer(PostDetail)
